<template>
  <div class="pageThree">
    <h1>{{ $t('page3.title') }}</h1>

    <div class="leftBox">
      <dv-border-box-13 class="top1">
        <span class="span3">{{ $t('page3.device_efficiency_trend') }}</span>
        <leftBox2 :key="updateKey"></leftBox2>
      </dv-border-box-13>
      <dv-border-box-12 class="rtableBox">
        <div class="span span2">{{ $t('page3.work_order_attainment_rate') }}</div>
        <rightcenterBox2  :key="updateKey"></rightcenterBox2>
      </dv-border-box-12>
      <div class="rightbox">
        <div class="span" style="margin: -10px 0 0 39%">{{ $t('page3.ongoing_work_orders') }}</div>
        <rightBox></rightBox>
      </div>
    </div>

    <div class="rightcenterBox">
      <div class="tableBox">
        <span>{{ $t('page3.cnc_workshop_capacity') }}</span>
        <leftCenterBox3  :key="updateKey"></leftCenterBox3>
      </div>
      <div class="cBox">
        <div class="span5">{{ $t('page3.cam_workshop_capacity') }}</div>
        <rightcenterBox4 :key="updateKey"></rightcenterBox4>
      </div>
      <div class="rbarBox">
        <div class="span span1">{{ $t('page3.workshop_two_capacity') }}</div>
        <rightcenterBox3   :key="updateKey"></rightcenterBox3>
      </div>
    </div>
  </div>
</template>

<script>
import leftBox2 from "../components/total/leftBox2.vue";
import leftCenterBox3 from "../components/total/leftCenterBox3.vue";
import rightcenterBox3 from "../components/total/rightCenterBox3.vue";
import rightcenterBox2 from "../components/total/rightCenterBox2.vue";
import rightcenterBox4 from "../components/total/rightCenterBox4.vue";
import rightBox from "../components/total/rightBox.vue";
export default {
  name: "pageThree",
  components: {
    leftBox2,
    leftCenterBox3,
    rightcenterBox3,
    rightcenterBox2,
    rightBox,
    rightcenterBox4,
  },
  data() {
    return {updateKey: 1,};
  },
  watch: {
    '$i18n.locale': {
      handler(newLocale) {
        this.$nextTick(() => {
       this.updateKey += 1;
    });
      },
      immediate: true, // 立即执行一次
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
h1 {
  position: relative;
  color: #9be5fb;
  font-size: 2rem;
  width: 33%;
  font-weight: 700;
  margin: 0 auto;
  margin-top: 40px;
  text-align: center;
  z-index: 9999;
  letter-spacing: 3px;
}
.pageThree {
  z-index: 999;
  width: 100%;
  height: 100%;
  padding: 0 35px;
  // display: flex;
}
span {
  font-size: 16px;
  margin-left: 325px;
  font-weight: 700;
  line-height: 50px;
}
.span {
  // text-align: center;
  font-size: 16px;
  margin-right: 20px;
  margin-bottom: -10px;
  line-height: 34px;
  font-weight: 700;
}
.span1 {
  margin: 0px 0px 0px 70px;
  line-height: 50px;
}
.span2 {
  position: absolute;
  font-weight: 700;
  margin: -30px 0px 0 180px;
}
.span3 {
  position: absolute;
  margin: -40px 0px 0 70px;
  font-weight: 700;
}
.span5 {
  font-weight: 700;
  margin: -35px 0 0 220px;
}
.leftBox {
  width: 97.6%;
  height: 45vh;
  margin-left: 10px;
  margin-top: 1.6%;
  display: flex;
  flex-direction: row;
  align-items: end;
}
.top1 {
  height: 45vh;
  width: 900px;
  padding: 15px 0 0 0;
  // margin-bottom: 8px;
}
.rightbox {
  width: 480px;
  height: 44vh;
  background: url("~@/assets/img/right3.png") no-repeat;
  background-size: 100% 100%;
}
.rtableBox {
  width: 480px;
  height: 44vh;
  padding: 8px;
}

.rightcenterBox {
  width: 100%;
  height: 43vh;
  margin: 10px 0 0 12px;
  display: flex;
  flex-direction: row;
  align-items: end;
}
.tableBox {
  width: 600px;
  height: 44vh;
  padding: 10px 8px 20px 8px;
  // margin-top: -30px;
  background: url("~@/assets/img/center3.png") no-repeat;
  background-size: 100% 100%;
}
.cBox {
  width: 600px;
  height: 39vh;
  padding: 10px 0px 8px 8px;
  border: 1px solid #414681;
  box-shadow: #414681 0 0 6px;
  margin: 0px 5px 8px;
}
.rbarBox {
  width: 600px;
  height: 44vh;
  padding: 10px 8px 0px 15px;
  // margin-bottom: 20px;
  background: url("~@/assets/img/center4.png") no-repeat;
  background-size: 100% 100%;
}
</style>
